

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface SettingItemProps {
  id: string;
  icon: string;
  iconColor: string;
  title: string;
  description: string;
  value: boolean;
  onToggle: () => void;
  isLast?: boolean;
}

const SettingItem: React.FC<SettingItemProps> = ({
  icon,
  iconColor,
  title,
  description,
  value,
  onToggle,
  isLast = false,
}) => {
  return (
    <TouchableOpacity 
      style={[styles.container, !isLast && styles.containerWithBorder]} 
      onPress={onToggle}
      activeOpacity={0.7}
    >
      <View style={styles.leftContent}>
        <LinearGradient
          colors={[iconColor, iconColor + 'CC']}
          style={styles.iconContainer}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        >
          <FontAwesome6 name={icon} size={16} color="#FFFFFF" />
        </LinearGradient>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.description}>{description}</Text>
        </View>
      </View>
      
      <View style={styles.toggleContainer}>
        <TouchableOpacity 
          style={[styles.toggleTrack, value && styles.toggleTrackActive]} 
          onPress={onToggle}
          activeOpacity={0.8}
        >
          <View style={[styles.toggleThumb, value && styles.toggleThumbActive]} />
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
};

export default SettingItem;

